<template>
  <div class="audition102">
    <p>1. 不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异</p>
    <p>2. 初始化CSS可以节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁</p>
    <hr>
    <h3>拓展：</h3>
    <p>弊端： 初始化样式会对seo有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化</p>
    <h3>怎么初始化css？</h3>
    <p>最简单粗暴的方法：</p>
    <code class="code">
      * {<br />
        <span class="indient">padding: 0;</span><br />
        <span class="indient">margin: 0;</span><br />
      }
    </code>
    <p>淘宝样式初始化：</p>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` css'
const suffix = '```'
export default {
  name: 'Audition102',
  data() {
    return {
      text1: `${prefix}
      body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
      dl, dt, dd, ul, ol, li, pre, form, fieldset, 
      legend, button, input, textarea, th, td {   
        margin:0; 
        padding:0; 
      }
      body, button, input, select, textarea { 
        font:12px/1.5tahoma, arial, \\5b8b\\4f53; 
      }
      h1, h2, h3, h4, h5, h6 { 
        font-size:100%; 
      }
      address, cite, dfn, em, var { 
        font-style:normal; 
      }
      code, kbd, pre, samp { 
        font-family:couriernew, courier, monospace; 
      }
      small{ 
        font-size:12px; 
      }
      ul, ol { 
        list-style:none; 
      }
      a { 
        text-decoration:none; 
      }
      a:hover { 
        text-decoration:underline; 
      }
      sup { 
        vertical-align:text-top; 
      }
      sub { 
        vertical-align:text-bottom; 
      }
      legend { 
        color:#000; 
      }
      fieldset, img { 
        border:0; 
      }
      button, input, select, textarea { 
        font-size:100%; 
      }
      table { 
        border-collapse:collapse; 
        border-spacing:0; 
      }
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>